<template>
  <div class="page-container">
    <div class="swiper-wrapper">
      <swiper height="120px" :show-dots="false" :list="swiperList" v-model="swiperIndex" @on-index-change="swiperChange"></swiper>
    </div>
    <div class="article-wrapper">
      <ul class="list" ref="scroll">
        <li
          @click="gotoArticleDetails(article)"
          class="list-item"
          v-for="(article, i) of articleList"
          :key="i"
        >
          <div class="image">
            <!-- <div class="bg-img"  :style="{'background-image': `url(${article.cardUrl})`}"></div> -->
            <x-img  :default-src="require('../../assets/images/default-card.png')" :src="article.cardUrl" alt="loadmore" />
          </div>
          <div class="intro">
            <div class="title">
              {{article.title}}
            </div>
            <div class="extras">
              <div class="source">作者：{{article.source}}</div>
              <div class="actions">
                <span class="show-time">
                  {{article.showTime ?  article.showTime.split('T')[0] : ''}} 
                </span>
                <!-- <star-icon :size="18" style="color: #777;"></star-icon>
                <span class="action-label">{{article.like}}</span>
                <thumb-up-icon :size="18" style="color: #777;"></thumb-up-icon>
                <span class="action-label">{{article.star}}</span> -->
              </div>
            </div>
          </div>
        </li>
        <li class="list-item" @click="refresh">
          <div
            class="v-progress-circular v-progress-circular--indeterminate red--text"
            style="height: 24px; width: 24px;color: #4195f8;"
             v-show="listLoading === 0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
              style="transform: rotate(0deg);"
            >
              <circle
                fill="transparent"
                cx="45.714285714285715"
                cy="45.714285714285715"
                r="20"
                stroke-width="5.714285714285714"
                stroke-dasharray="125.664"
                stroke-dashoffset="125.66370614359172px"
                class="v-progress-circular__overlay"
              ></circle>
            </svg>
            <div class="v-progress-circular__info"></div>
          </div>
          <span style="vertical-align:middle;display:inline-block;font-size:14px;">{{ loadingStatus[listLoading]}}</span>
        </li>
      </ul>
    </div>
    <div v-transfer-dom>
      <loading :show="loading" text="加载中"></loading>
    </div>
  </div>
</template>

<script>
import { home } from "../../requests";
import { throttle } from "lodash";
import { TransferDomDirective as TransferDom, XImg } from "vux";
export default {
  data() {
    return {
      loading: false,
      listLoading: 0,
      loadingStatus: ['加载中...', '点击刷新列表...', '没有更多了😄'],
      swiperList: [
        {
          url: "javascript:",
          img:
            "https://c-c.shuaishuaiup.com/minigame/images/20190326145322/1.png",
          title: ""
        },
        {
          url: "javascript:",
          img:
            "https://c-c.shuaishuaiup.com/minigame/images/20190326153744/5.png",
          title: ""
        },
        {
          url: "javascript:",
          img:
            "https://c-c.shuaishuaiup.com/minigame/images/20190326145322/5.jpg",
          title: ""
        }
      ],
      swiperIndex: 0,
      articleList: [
        {
          title: "职业选手初晨露娜玩法思路详细解读",
          source: "王者荣耀",
          like: 1562,
          star: 632,
          content:
            '优雅的外观、强劲的动力、与生俱来的运动性能与前端的造车技艺为奥迪RS7 Sportback Performance打造独树一帜的强者风范，使其成就集万千优势于一体的艺术之躯。当你打开车门，客舱上乘的材质、考究的工艺都在告诉你：这一切将专属于你。而专属强者的速度之美，在这个风云际会的时代，已强势来袭。<br/><img src="https://www.audi.cn/content/dam/nemo/cn/model/a7/rs7_sportback/2015/1680x1050/3q/rs7_sportback_performance_gallery_01.jpg.resize.maxWidth=1180.jpg" class="article-image">'
        }
      ],
      limit: 10,
      offset: 0,
      page: {
        // 1页 每次刷新加载3条
        index: 1,
        total: 0
      },
      throttleHandler: null
    };
  },
  mounted() {
    // for (let i = 0; i < 10; i++) {
    //   this.articleList.push(this.articleList[0]);
    // }
    // let app = document.querySelector("#app-box");
    // window.addEventListener("scroll", this.addScrollHandler, this);
    window.addEventListener("scroll", throttle.call(this, this.addScrollHandler, 1000) , this);
    window.scrollItem = this.$refs.scroll;
    this.getArticleList();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.addScrollHandler);
  },
  components:{
    XImg
  },
  directives: {
    TransferDom
  },
  methods: {
    swiperChange() {},
    refresh() {
      this.limit = this.articleList.length + 2;
      this.listLoading = 0;
      this.getArticleList();
    },
    addScrollHandler(ev) {
      let app = document.querySelector("#app-box");
      // console.log(app.scrollTop)
      // let { target } = ev;
      let scrollTop = window.scrollY;
      let availHeight = window.screen.availHeight;
      if(window.scrollItem) {
        let scrollHeight = window.scrollItem.scrollHeight;
      let ab = Math.abs(scrollTop + availHeight - scrollHeight - 96 - 120);
      console.log(this.page.total, this.articleList.length, ab)
      if(ab < 80 && this.page.total !== this.articleList.length) {
        this.limit = this.articleList.length + 2;
        // this.offset = this.articleList.length + 2;
        this.listLoading = 0;
        this.getArticleList();
      } else {
        this.listLoading = 1;
      }

      if(this.page.total === this.articleList.length) {
        this.listLoading = 2;
      }
      }
      
    },
    getArticleList() {
      let list = localStorage.getItem("heatArticle");
      if (list) {
        this.articleList = JSON.parse(list);
      } else {
        this.loading = true;
      }
      let params = {
        limit: this.limit,
        offset: this.offset,
        type: 0
      };
      home.getArticleList.r(params).then(({ data }) => {
        let list = data.data.dataList;
        this.page.total = data.data.totalCount;
        let rx = /src=\&quot;([^\&quot;]*)\&quot;/;
        list.forEach((item, i) => {
          let res = rx.exec(item.content);
          if (res) {
            item.cardUrl = item.pictureUrl + "/" + res[1];
          }
        });
        // if(this.listLoading) {
          // this.articleList.push(list);
        this.page.index += 1;
        // } else {
        this.articleList = list;
        localStorage.setItem("heatArticle", JSON.stringify(list));
        // }
        
        this.listLoading = 1;
        this.loading = false;
        console.log("getArticleList", data.data);
      })
      .catch(err=>{
        this.loading = false;
      })
    },
    gotoArticleDetails(article) {
      this.$router.push({ name: "ArticleDetails", params: article });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
}
.article-wrapper {
  width: 100%;
  height: 100%;
  // overflow: auto;
  .list {
    width: 100%;
    height: 100%;
    // overflow: auto;
    .list-item {
      border-bottom: 0.5px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      height: 5.4rem;
      width: 100%;
      .image {
        flex: 1;
        height: 100%;
        padding: 8px;
        display: flex;
        align-items: center;
        overflow: hidden;
        img {
          width: 100%;
          height: 80%;
        }
        .bg-img {
          background-size: 96%;
          background-position: center;
          background-repeat: no-repeat;
          width: 100%;
          height: 80%;
        }
        
        // img {
        //   width: 80%;
        //   height: 100%;
        // }
      }
      .intro {
        flex: 2;
        .title {
          padding: 5px;
          font-size: 0.85rem;
        }
        .extras {
          display: flex;
          justify-content: space-between;
          padding-right: 0.5rem;
          .source {
            color: #333;
            font-size: 0.8rem;
            padding: 5px;
            width: 10rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .actions {
            flex-basis: 40%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            .show-time {
              font-size: 0.65rem;
            }
          }
          .action-label {
            font-size: 0.7rem;
            position: relative;
            top: 0;
          }
        }
      }
    }
  }
}
</style>
